<template>
  <div class="emptyBox">
    <div class="nothingsBox">
      <img src="./images/nothingsImg.svg" alt="暂无内容" />
      <p class="msg">{{data.msg}}</p>
    </div>
  </div>
</template>

<script>
import { reactive } from '@vue/reactivity'
import { onMounted } from '@vue/runtime-core';
export default {
  name: "NothingsBox",
  props: {
    msg: {
      type: String,
      default: "",
    },
  },
  setup(props) {
    const data = reactive({
      msg: "",
    });


    onMounted(() => {
      data.msg = props.msg;
    });

    return {
      data,
    }
  },
}
</script>

<style lang="less" scoped>
.emptyBox {
  display: flex;
  align-items: center;
  justify-content: center;
  .nothingsBox {
    img {
      display: block;
      width: 81px;
      height: 80px;
      margin: 0px auto 5px;
    }
    .msg {
      font-size: 12px;
      line-height: 12px;
      color: rgba(0, 0, 0, 0.25);
      text-align: center;
    }
  }
}
</style>